<template>
	<div>
		<el-carousel :interval="4000" type="card" height="200px">
			<el-carousel-item v-for="item in banners" >
				<img :src="item" height="200px"/>
			</el-carousel-item>
		</el-carousel>
		<div class="recommend">
			<h3 style="margin-bottom: 10px">猜你喜欢</h3>
			<div class="items">
				<div class="item" v-for="item in recommedlist">
					<div class="img-wrap" @click="toPlayList(item.id)">
						<img :src="item.picUrl" width="100%" height="150px" >
						<div class="content-wrap">
							<span>{{item.copywriter}}</span>
						</div>
					</div>
					<div class="name" >{{item.name}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "discovery",
		data(){
			return{
				banners:['http://p1.music.126.net/NkHBe521hwWs3eJ5TLy-Qw==/109951165616436789.jpg',
						'http://p1.music.126.net/JyI9hZtTb8uJCPVppkGuPw==/109951165614695270.jpg',
						'http://p1.music.126.net/9_Rq9sz1VIYllZ970pFPsw==/109951165614698461.jpg',
						'http://p1.music.126.net/uNEsE0fysLIJ9PZFppping==/109951165616447416.jpg',
						'http://p1.music.126.net/7Uq9in3dWHlQSWgth7zKpg==/109951165614824173.jpg',
						'http://p1.music.126.net/KWmD09-GqAJAPnpeohL77Q==/109951165614722495.jpg',
						'http://p1.music.126.net/sHJiI75uXLrsODpuVfiORA==/109951165614750249.jpg',
						'http://p1.music.126.net/LlAM3KXlmsnN5FCbEFfk6w==/109951165614741036.jpg',
						'http://p1.music.126.net/GDUARnXI5QM6FLqYHKNLwA==/109951165614740248.jpg'
				],
				recommedlist:[]
			}
		},
		methods: {
			toPlayList(id) {
				// 携带参数跳转路由
				this.$router.push({
					name: 'playList',
					params: {
						id: id
					},
				})
			}
		},
		created() {
			axios({
				url:'https://autumnfish.cn/personalized?limit=10',
				method:'get'
			}).then(resp=>{
				console.log(resp);
				this.recommedlist=resp.data.result;
			})
		}
	}
</script>

<style scoped>
	.el-carousel__item {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 100px;
		margin: 0;
	}
	.recommend, .items{
		display: flex;
		width: 100%;
		height: 350px;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 80px
	}
	.item{
		width: 19%;
		height: 170px;
		overflow: hidden;
		margin-right: 10px;
		margin-bottom: 10px;
		position: relative;
	}

	.img-wrap .content-wrap{
		display:none;
		text-decoration:none;
		position: relative;
		margin-right: 10px;
	}
	.img-wrap:hover .content-wrap{
		display:block;
		position:relative;
		z-index: 10;
		top:-150px;
		left:0;
		color:#fff;
		width: 100%;
		overflow: hidden;
		height: 50px;
		font-size: 12px;
	}
	.name{
		font-size: 10px;
		color: black;
		display: block;
		position: absolute;
		bottom: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

</style>
